<template>
    <div class="box">
        <div class="panel">
            <div class="login_title">用户注册</div>
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="120px"
                class="ruleFormClass"
                size="large"
                status-icon
            >
                <el-form-item label="姓名：" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input v-model="ruleForm.password" show-password />
                </el-form-item>
                <el-form-item label="省/市:" prop="province">
                    <el-cascader
                                style="width: 100%"
                                :options="mapList"
                                @change="handleChangeCity"
                                placeholder="请选择地区"
                            />
                </el-form-item>
                <el-form-item label="电话号码:" prop="phone">
                    <el-input v-model="ruleForm.phone" show-password />
                </el-form-item>
                
                <el-form-item label="">
                    <el-button type="primary" :style="{ width: '100%' }" @click="register">注册</el-button>
                    <a @click="router.push('/login')" style="text-align: center; width: 100%; cursor: pointer;">去登录</a>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { type FormInstance, type FormRules } from 'element-plus'
import { login as logIn, getUserInfo } from '../api/index'
import Message from '../utils/Message'
import { useUserInfo } from '../store'
const userInfo = useUserInfo()
import { getMapList, signup } from '../api'

let mapList = ref([])

 const init =async () => {
        const res = await getMapList({ province: '四川' })
        mapList.value = res.data.result || []
  }
 init()
interface RuleForm {
    name: string
    password: string
    province: string
    phone: string
    city: string
    role: string
}

const router = useRouter()

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    password: '',
    province: '',
    city: '',
    phone: '',
    role: 'normal'
})
const rules = reactive<FormRules<RuleForm>>({
    name: [
        {
            required: true,
            message: '请输入用户名'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码'
        }
    ],
    province: [
        {
            required: true,
            message: '请选择地区'
        }
    ],
    phone: [
        {
            required: true,
            message: '请输入联系方式'
        }
    ],
    
})

// 用户注册
const register = () => {
    ruleFormRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        console.log('🚀 ~ This is a result of console.log ~ ✨ruleForm: ', ruleForm);
        try {
            const res = await signup(ruleForm)
            if (res.status !== 200) return Message.error('注册失败')
            // 用拿到的token去获取用户信息
            Message.success('注册成功')
            setTimeout(() => {
                router.push('/login')
            }, 1000)
        } catch (e) {
            console.log('🚀 ~ This is a result of console.log ~ ✨: ', e)
        }
    })
}


// 省市发生改变
const handleChangeCity = (value: Array<string>) => {
    ruleForm.province = value[0]
    ruleForm.city = value[1]
}
</script>

<style lang="scss" scoped>
.box {
    height: calc(100vh);
    width: 100%;
    background-image: url('../../public/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    .panel {
        width: 400px;
        background-color: rgba(255, 255, 255, 0.8);
        float: right;
        margin-top: 200px;
        margin-right: 255px;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 2px 2px 10px #ddd;
        .login_title {
            font-weight: 800;
            margin-bottom: 20px;
            margin-bottom: 20px;
            text-align: center;
            font-size: 20px;
        }
    }
}
</style>
